<template>
	<view>
		<uni-nav-bar left-icon="left"    :statusBar="true" titleSize="30px" leftText="返回"    title="物流"  @clickLeft="back" @clickRight="addFn"  :fixed="true" backgroundColor="#3286ed" color="#fff"/>
	    <!-- 筛选 -->
		<view  v-if="searchShow===false">
			<view style="position: fixed;z-index: 100;width:100%;">
				<uni-row class="demo-uni-row">
					<uni-col :span="10">
						<zb-dropdown-menu  style="width: 100%" z-index="12">
						  <zb-dropdown-item  v-model="formData.orderProperty"   :options="option"    @change="changeFn"></zb-dropdown-item>
						</zb-dropdown-menu>
					</uni-col>
					<uni-col :span="1">
						<view class="title"  style="color:#c3c3c3">|</view>
					</uni-col>
					<uni-col :span="6">
						<view class="title" @click="searchBtn">筛选</view>
					</uni-col>
					<uni-col :span="1">
						<view class="title"  style="color:#c3c3c3">|</view>
					</uni-col>
					<uni-col :span="6">
						<view class="title">
							<uni-icons @click="magnifierBtn" type="search" size="24" color="#c3c3c3"></uni-icons>
						</view>
					</uni-col>
				</uni-row>
			</view>
			<view  v-if="searchShow===false" style="width:100%;height: 88rpx;display: block;margin-bottom: 10px;"></view>
		</view>
		<view>
			<u-search  v-if="searchShow===true" style="height;40px;background-color: #fff;padding: 10px;" @clear="clearFn" :clearabled="true" showAction @custom="customFn" @search="inputSearchBtn" v-model.enter="formData.orderNo" height='30' placeholder="请输入订单编码" shape="square" actionText='取消'></u-search>
		</view>
		 <!-- 列表 -->
		 <u-swipe-action :autoClose="true">
			 <view class="list" v-for="(item,index) in list" :key="item.id" >
		         <u-swipe-action-item :options="options1" :disabled="disabledShow" @click="delFn(item.id)" >
						<view style="padding: 10px;" @click="detauilsBtn(item)">
							<view class="desc">订单编号：{{item.orderNo}}</view>
							<view v-if="item.outboundNo" class="desc">出库编号：{{item.outboundNo}}</view>
							<view v-else class="desc">入库申请编号：{{item.returnApplyNo}}</view>
							<view class="desc">项目名称：{{item.projectName}}</view>
							<view class="desc">仓库名称:{{item.warehouseName}}</view>
							<view class="desc">物流费:{{item.logisticsExpenses}}</view>
							<view class="desc">到货日期:{{item.arrivalDate}}</view>
							<view class="desc">出入库类型：
								 <span class='bgc' v-if="item.orderProperty==1">出库</span>
								 <span class='bgc' v-if="item.orderProperty==2">入库</span>
							</view>
						</view>
		         </u-swipe-action-item>
			 </view>
		 </u-swipe-action>
		
		 <!-- 当没有数据显示 -->
		 <view v-if="list.length ==0 && searchShow==false" class="BGC"></view>
	     <!-- 消息提示 -->
		 <u-toast ref="uToast"></u-toast>
		 <!-- 右边 -->
		 <u-popup  :show="isShow" customStyle="margin-top:44px;min-width:300px;" overlayStyle="margin-top:44px"  mode="right"  :closeOnClickOverlay="true" @close="closeBtn" >
			 <view class="popup">
				<u--form style="padding-left: 8px;" labelPosition="left" labelWidth="150px" :model="formData" ref="form">
				    <u-form-item   label="业务员"   borderBottom ref="item1">
				        <u--input     v-model="formData.salesmanName" border="none"
				            placeholder="业务员"></u--input>
				    </u-form-item>
					<u-form-item @click="warehouseShow=true"  label="仓库"   borderBottom ref="item1">
					    <u--input disabled disabledColor="#fff" v-model="formData.warehouseName" border="none"
					        placeholder="仓库"></u--input>
					</u-form-item>
					<u-form-item @click="shipTypeShow=true"  label="出入库类型"   borderBottom ref="item1">
					    <u--input disabled disabledColor="#fff" v-model="shipping" border="none"
					        placeholder="出入库类型"></u--input>
					</u-form-item>
					 </u--form>
				 
				 <u-picker @cancel="warehouseShow=false"  :show="warehouseShow" @confirm="confirmFn" :columns="columns"></u-picker>
			     <u-picker :closeOnClickOverlay="true"   @cancel="shipTypeShow=false" @confirm="confirm" :show="shipTypeShow" :columns="actionsList" keyName="dictLabel"></u-picker>
			 
				 <view class="button">
					 <view class="btn" style="border-right: solid 1px #c3c3c3;" @click="resetBtn">重置</view>
					 <view class="btn" @click="btnOk">确认</view>
				 </view>
			
			 </view>
		 </u-popup>
	</view>
</template>

<script>
	
	import {listWarehouse} from '@/api/warehouse.js'
	import {getDicts} from "@/api/dictionary/index.js"
	import {getLogisticsListApi,delLogistApi} from "@/api/logistics.js"
	export default {
		data(){
			return{
				formData:{
					pageNum:1,
					pageSize:5,
					orderProperty:'',
					warehouseName:'',
					shippingType:'',
					 
					orderNo:''
				},
				shipping:'',
				list:[],
				permissions:[],
				disabledShow:true,
				isShow:false,
				warehouseShow:false,
				shipTypeShow:false,
				searchShow:false,
				total:0,
				options1:[{text:'删除'}],
				option:[{text:'出入库状态',value:''},{text:'到货日期未填写',value:'到货日期未填写'},{text:'物流费未填写',value:'物流费未填写'}],
				columns:[],
				actionsList:[],//运输方式
				
			}
		},
		onLoad(){
			this.permissions=this.$store.getters.permissions
			this.initData()
			this.getoutReturnType()
			
			// 控制删除按钮权限出现
			if(this.permissions.includes('*:*:*') ||this.permissions.includes('module:logisticscost:delete')){
			     this.disabledShow=false
			}
			this.getWarehouse()
			this.getShippingType()
		},
		onReachBottom(){
			// 上划加载
			if(this.list.length==this.total){
				this.formData.pageNum=1
				return false
			}
			this.formData.pageNum++
			getLogisticsListApi(this.formData).then(response=>{
				console.log(response);
				this.list.push(...response.rows)
				 console.log(this.list);
			})
			
		},
		onPullDownRefresh(){
			// 下拉加载
			this.formData.pageNum=1
			this.list=[]
			this.initData()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},2000)
		},
		methods:{
			
			back(){
				uni.switchTab({
					url:'/pages/index'
				})
			},
			
			async initData(){
				const res=await getLogisticsListApi(this.formData)
				console.log(res);
				this.list=res.rows
				this.total=res.total
			},
			// 获取出入库状态out_return_type、
			getoutReturnType(){
				let newArr=[]
				getDicts('out_return_type').then(response=>{
					newArr=response.data.map(item=>{
						return {text:item.dictLabel,value:item.dictValue}
					})
					this.option=this.option.concat(newArr)
				})
			},
			// 获取运输方式 biz_shipping_type
			getShippingType(){
				getDicts('biz_shipping_type').then(response=>{
					this.actionsList.push(response.data)
					// this.actionsList=response.data.map(item=>{
					// 	return {name:item.dictLabel,value:item.dictValue}
					// })
					 
				})
			},
			// 获取仓库数
			async getWarehouse(){
				const res=await listWarehouse({pageNum:1,pageSize:10000})
			    // console.log(res);
				let newArr=[]
				res.rows.forEach(item=>{
					newArr.push(item.warehouseName)
				})
				// console.log(newArr);
				this.columns.push(newArr)
				
			},
			// 选择仓库
			confirmFn(e){
				console.log(e);
				this.formData.warehouseName=e.value[0]
				this.warehouseShow=false
			},
			// 选中运输方式
			confirm(e){
				console.log(e);
				this.formData.shippingType=e.value[0].dictValue
			     this.shipping=e.value[0].dictLabel
				 this.shipTypeShow=false
			},
			detauilsBtn(item){
				uni.navigateTo({
					url:'/pages/logistics/details/index?id='+item.id
				})
			},
			delFn(id){
				delLogistApi(id).then(response=>{
					console.log(response);
					if(response.code==200){
						this.$refs.uToast.show({
							type:'success',
							message:'删除成功!'
						})
					}
					this.initData()
				})
			},
			// 出入库状态筛选
			async changeFn(e){
				console.log(e);
				this.formData={}
				this.formData.orderProperty=e.value
				if(e.text==='到货日期未填写'){
				let res=await getLogisticsListApi()
				let arr=[]
					 res.rows.forEach(item=>{
						 if(!item.arrivalDate){
							 arr.push(item)
						 }
					 })
					 this.list=arr
					 console.log(this.list);
				}
				if(e.text==='物流费未填写'){
					 let res=await getLogisticsListApi()
					 let arr=[]
					 	 res.rows.forEach(item=>{
					 		 if(!item.logisticsExpenses){
					 			 arr.push(item)
					 		 }
					 	 })
					 	 this.list=arr
					 console.log(this.list);
				}
				if(e.text==='出入库状态'){
					 let res=await getLogisticsListApi()
					  
					 	 this.list=res.rows
					 console.log(this.list);
				}
				if(e.text==='出库' || e.text==='入库'){
					 let res=await getLogisticsListApi({orderProperty:e.value})
					 this.list=res.rows
				}
				
			},
			// 筛选
			searchBtn(){
				this.isShow=true
			},
			// 关闭右边弹框
			closeBtn(){
				this.isShow=false
				this.formData={}
			},
			// 重置
			resetBtn(){
				this.formData={}
			},
			// 跳转新增页面
			addFn(){
				uni.navigateTo({
					url:'/pages/logistics/addlogistics/addlogistics'
				})
			},
			btnOk(){
				this.initData()
				this.formData={
					pageNum:1,
					pageSize:5,
					orderProperty:'',
					warehouseName:'',
					shippingType:'',
					shipping:'',
				}
				console.log(this.formData);
				this.isShow=false
			},
			// 点击搜索
			magnifierBtn(){
				this.searchShow=true
				this.list=[]
			},
			clearFn(){
				this.formData.orderNo=''
				this.list=[]
			},
			customFn(){
				this.formData.orderNo=''
				this.list=[]
				this.searchShow=false
				this.initData()
			},
			inputSearchBtn(val){
				this.formData.orderNo=val
				this.initData()
			}
		}
	}
</script>

<style lang="scss">
	.demo-uni-row {
		margin-bottom: 10px;
			// position: fixed;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
			
			.title{
				height:48px;
				line-height: 48px;
				background-color: #ffffff;
				text-align: center;
				font-size: 14px;
			}
	}
	.list{
		background-color: #fff;
		border: solid 1px #c3c3c3;
		margin: 5px;
		.desc{
			font-size: 12px;
			margin-top: 3px;
			.bgc{
				width: 30px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				display: inline-block;
				color: #fff;
				background-color: #fd9540;
			}
		}
	}
	.BGC{
		width: 100%;
		min-height: 400px;
		background-image: url('@/static/images/bgc.png');
		background-size:100% 200px;
		background-repeat: no-repeat;
	}
	// 晒选的按钮
	.popup{
		height: 100%;
		width: 100%;
		position: relative;
		.button{
			position: absolute;
			bottom: 0;
			display: flex;
			width: 100%;
			justify-content: space-around;
			border-top: solid 1px #c3c3c3;
			.btn{
				width: 50%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				
			}
		}
	}
	
</style>